<template>
  <div class="ele-body">
    <div class="tital_war">
      <a-space>
        <LeftOutlined />
        <a @click="back" style="margin-left:8px;">返回</a>
        <h1>商品添加</h1></a-space
      >
    </div>

    <a-card :bordered="false">
      <a-form :model="addFrom" :rules="addFromRules" ref="addFormRef">
        <a-tabs v-model:activeKey="activeKey" @change="tabsChange">
          <!-- 基础信息 -->
          <a-tab-pane key="1" tab="基础信息">
            <a-form-item label="分类">
              <a-select v-model:value="addFrom.cate_id" placeholder="请选择商品分类" @change="ress">
                <a-select-option v-for="item in options" :key="item.value" :disabled="item.disabled" :value="item.value">{{ item.label }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="品牌">
              <a-select v-model:value="addFrom.brand_id" placeholder="请选择商品品牌">
                <a-select-option v-for="item in optionsBrand" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="供应商">
              <a-select v-model:value="addFrom.supplier_id" placeholder="请选择供应商">
                <a-select-option v-for="item in optionsGys" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
              </a-select>
            </a-form-item>
            <!-- <a-form-item label="标签">
              <a-select v-model:value="addFrom.label_id" mode="multiple" :options="optionsLabel" @change="handleChange"> </a-select>
            </a-form-item> -->
            <!-- <a-form-item label="国家">
              <a-select v-model:value="addFrom.country" placeholder="请选择商品国家">
                <a-select-option v-for="item in optionsBrandGj" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
              </a-select>
            </a-form-item> -->
            <!-- 名称 -->
            <a-form-item label="商品名称中文" name="cateName_zh">
              <a-input v-model:value="addFrom.cateName_zh" placeholder="请输入商品名称" />
            </a-form-item>
            <a-form-item label="商品名称英文" name="cateName_en">
              <a-input v-model:value="addFrom.cateName_en" placeholder="请输入商品名称" />
            </a-form-item>
            <a-form-item label="商品名称德语" name="cateName_de">
              <a-input v-model:value="addFrom.cateName_de" placeholder="请输入商品名称" />
            </a-form-item>

            <!-- 状态 -->
            <a-form-item label="商品状态:">
              <a-radio-group v-model:value="addFrom.status">
                <a-radio :value="1">上架</a-radio>
                <a-radio :value="0">下架</a-radio>
              </a-radio-group>
            </a-form-item>
            <!-- 基础信息底部 -->
            <a-form-item>
              <a-button type="primary" @click="activeKey = '2'">下一步</a-button>
            </a-form-item>
          </a-tab-pane>

          <!-- 规格库存开始 -->
          <a-tab-pane class="kucun" style="height:100%; width:100%;" key="2" tab="规格库存">
            <!-- 单规格多规格切换 -->
            <a-form-item label="商品规格">
              <a-radio-group v-model:value="addFrom.spec_type" @change="switchDS(addFrom.spec_type)">
                <a-radio :value="0">单规格</a-radio>
                <a-radio :value="1">多规格</a-radio>
              </a-radio-group>
            </a-form-item>
            <!-- 单规格 -->
            <div v-if="dan">
              <!-- 图片 -->
              <a-form-item label="图片">
                <a-upload name="file" list-type="picture-card picture" :show-upload-list="false" class="pic" :custom-request="data => onFileUpload(data)">
                  <div>
                    <img style="height:36px; width:36px;" v-if="imgUrl1 != null" :src="imgUrl1" alt="" />
                  </div>
                </a-upload>
              </a-form-item>

              <!-- 售价 -->
              <a-form-item label="售价" name="price">
                <a-input style="width: 200px;" v-model:value="addFrom.price" type="number" :min="0" />
              </a-form-item>
              <!-- 成本价格 -->
              <!-- <a-form-item label="成本价" name="ot_price">
                <a-input style="width: 200px;" v-model:value="addFrom.ot_price" type="number" :min="0" />
              </a-form-item> -->
              <!-- 原价 -->
              <a-form-item label="成本价" name="cost">
                <a-input style="width: 200px;" v-model:value="addFrom.cost" type="number" :min="0" />
              </a-form-item>
              <!-- 库存 -->
              <!-- <a-form-item label="库存" name="stock">
                <a-input style="width: 200px;" v-model:value="addFrom.stock" type="number" :min="0" />
              </a-form-item> -->
              <!-- 商品编号 -->
              <a-form-item label="商品编号" name="bar_code">
                <a-input v-model:value="addFrom.bar_code" style="width: 200px;" />
              </a-form-item>
              <!-- 重量 -->
              <a-form-item label="重量（KG）" name="weight">
                <a-input style="width: 200px;" v-model:value="addFrom.weight" type="number" :min="0" />
              </a-form-item>
              <!-- 体积 -->
              <a-form-item label="体积（m³）" name="volume">
                <a-input style="width: 200px;" v-model:value="addFrom.volume" type="number" :min="0" />
              </a-form-item>
              <!-- SKU -->
              <!-- <a-form-item label="SKU">
                <a-input style="width: 200px;" v-model:value="addFrom.sku_code" />
              </a-form-item> -->
              <!-- 预警 -->
              <a-form-item label="库存预警:" name="warning_stock">
                <a-input style="width: 100px;" v-model:value="addFrom.warning_stock" type="number" :min="0" />
              </a-form-item>
              <!-- 低警戒值 -->
              <a-form-item label="低预警数量:" name="low_warning">
                <a-input style="width: 100px;" v-model:value="addFrom.low_warning" type="number" :min="0" />
              </a-form-item>
              <a-form-item label="标签">
                <a-select style="width: 200px;" v-model:value="addFrom.label_id" mode="multiple" :options="optionsLabel"> </a-select>
              </a-form-item>
            </div>

            <!-- 双规格 -->
            <div v-else>
              <a-form-item label="选择规格" style="width:100%;">
                <a-select v-model:value="addFrom.type_id" placeholder="请选择商品分类" :options="optionsType" style="width:300px; margin-right: 10px;" @change="getTypeItem(addFrom.type_id)">
                </a-select>
                <a-button style="margin-right:20px;" type="primary" @click="querenSc">确认</a-button>
                <a-button @click="addMuban">添加模板</a-button>
              </a-form-item>
              <!-- 选择规格后生成的 -->
              <a-form-item v-show="tagsShow" label=" " :colon="false" style="width:100%;">
                <div class="warp_tj" v-for="(item, index) in tagsList" :key="item.id">
                  <span class="iconfont icon-drag"></span>
                  <div class="tianjia_item">
                    <div class="top">
                      <span>{{ item.rule_name }}</span
                      ><span class="iconfont icon-cuowu" @click="delte1(index)"></span>
                    </div>
                    <div>
                      <a-tag v-for="(subItem, index2) in item.rule_attr" :key="subItem.id" closable @close="log(index, index2)" style="background:#fff;" :size="middle"
                        ><template #icon> <span style="color:#2d8cf0;" class="iconfont icon-yuan"></span> </template>{{ subItem.attr_name }}</a-tag
                      >
                    </div>
                  </div>
                </div>
              </a-form-item>
              <!-- 添加新规格和生成SKU -->
              <a-form-item label=" " :colon="false" style="width:100%;">
                <a-button style="background:#19be6b; color:#fff;" @click="shengcheng">立即生成</a-button>
              </a-form-item>
              <!-- SKUUUUUUUU -->
              <a-form-item label="" v-if="SkuSS" :colon="false" style="width:100%;">
                <span>批量设置：</span>
                <a-table :columns="PlColumnsSku" row-key="index" :data-source="PlDataSku" :pagination="false" bordered>
                  <template #pic="{index,text}">
                    <div class="editable-cell-input-wrapper">
                      <a-upload name="file" list-type="picture-card picture" :show-upload-list="false" class="pic" :custom-request="data => onFileUploadP1(data, index)">
                        <img style="height:36px; width:36px;" v-if="text != ''" :src="text" alt="" />
                        <span v-else></span>
                      </a-upload>
                    </div>
                  </template>
                  <!-- 售价 -->
                  <template #price="{record}">
                    <div class="editable-cell-input-wrapper">
                      <a-input v-model:value="record.price" type="number" :min="0" />
                    </div>
                  </template>
                  <!-- 成本价 -->
                  <template #cost="{record}">
                    <div class="editable-cell-input-wrapper">
                      <a-input v-model:value="record.cost" type="number" :min="0" />
                    </div>
                  </template>
                  <!-- 商品编码 -->
                  <template #bar_code="{record}">
                    <div class="editable-cell-input-wrapper">
                      <a-input v-model:value="record.bar_code" />
                    </div>
                  </template>
                  <!-- 重量 -->
                  <template #weight="{record}">
                    <div class="editable-cell-input-wrapper">
                      <a-input v-model:value="record.weight" type="number" :min="0" />
                    </div>
                  </template>
                  <!-- 体积 -->
                  <template #volume="{record}">
                    <div class="editable-cell-input-wrapper">
                      <a-input v-model:value="record.volume" type="number" :min="0" />
                    </div>
                  </template>
                  <template #warning_stock="{record}">
                    <div class="editable-cell-input-wrapper">
                      <a-input v-model:value="record.warning_stock" type="number" :min="0" />
                    </div>
                  </template>
                  <template #low_warning="{record}">
                    <div class="editable-cell-input-wrapper">
                      <a-input v-model:value="record.low_warning" type="number" :min="0" />
                    </div>
                  </template>
                  <template #label_id="{record}">
                    <a-select v-model:value="record.label_id" mode="multiple" :options="optionsLabel"> </a-select>
                  </template>
                  <!-- 操作 -->
                  <template #operation="{ index }">
                    <div class="editable-row-operations">
                      <span> <a @click="PdelRowIndex(index)">批量添加</a>&nbsp; </span>
                      <span> <a @click="Preset">清除</a>&nbsp; </span>
                    </div>
                  </template>
                </a-table>
                <span>商品属性：</span>
                <a-table :columns="columnsSku" row-key="pic" :data-source="dataSku" :pagination="false" bordered>
                  <template #pic="{index,text}">
                    <div class="editable-cell-input-wrapper">
                      <a-upload name="file" list-type="picture-card picture" :show-upload-list="false" class="pic" :custom-request="data => onFileUpload3(data, index)">
                        <img style="height:36px; width:36px;" v-if="text != ''" :src="text" alt="" />
                        <span v-else></span>
                        <!-- <span></span> -->
                      </a-upload>
                    </div>
                  </template>
                  <template #price="{record}">
                    <div class="editable-cell-input-wrapper">
                      <a-input v-model:value="record.price" type="number" :min="0" />
                    </div>
                  </template>
                  <template #cost="{record}">
                    <div class="editable-cell-input-wrapper">
                      <a-input v-model:value="record.cost" type="number" :min="0" />
                    </div>
                  </template>
                  <template #bar_code="{record}">
                    <div class="editable-cell-input-wrapper">
                      <a-input v-model:value="record.bar_code" />
                    </div>
                  </template>
                  <template #weight="{record}">
                    <div class="editable-cell-input-wrapper">
                      <a-input v-model:value="record.weight" type="number" :min="0" />
                    </div>
                  </template>
                  <template #volume="{record}">
                    <div class="editable-cell-input-wrapper">
                      <a-input v-model:value="record.volume" type="number" :min="0" />
                    </div>
                  </template>
                  <template #warning_stock="{record}">
                    <div class="editable-cell-input-wrapper">
                      <a-input v-model:value="record.warning_stock" type="number" :min="0" />
                    </div>
                  </template>
                  <template #low_warning="{record}">
                    <div class="editable-cell-input-wrapper">
                      <a-input v-model:value="record.low_warning" type="number" :min="0" />
                    </div>
                  </template>
                  <template #label_id="{record}">
                    <a-select v-model:value="record.label_id" mode="multiple" :options="optionsLabel"> </a-select>
                  </template>
                  <template #operation="{ index }">
                    <div class="editable-row-operations">
                      <span> <a @click="delRowIndex(index)">删除</a>&nbsp; </span>
                    </div>
                  </template>
                </a-table>
              </a-form-item>
            </div>
            <!-- 规格库存底部 -->
            <a-form-item>
              <a-button style="margin:0 20px 0 30px;" @click="activeKey = '1'">上一步</a-button>
              <a-button type="primary" @click="activeKey = '3'">下一步</a-button>
            </a-form-item>
          </a-tab-pane>
          <!-- 商品详情 -->
          <a-tab-pane key="3" tab="商品详情">
            <a-form-item label="语种" style="width:300px;">
              <a-select v-model:value="detailItem" :options="detailChange"> </a-select>
            </a-form-item>
            <a-form-item v-show="zh_qh" label="商品详情" style="height:500px; width: 100%;">
              <QuillEditor theme="snow" v-model:content="addFrom.detail_zh" :toolbar="toolbar" contentType="html" />
            </a-form-item>
            <a-form-item v-show="en_qh" label="商品详情" style="height:500px; width: 100%;">
              <QuillEditor theme="snow" v-model:content="addFrom.detail_en" :toolbar="toolbar" contentType="html" />
            </a-form-item>
            <a-form-item v-show="de_qh" label="商品详情" style="height:500px; width: 100%;">
              <QuillEditor theme="snow" v-model:content="addFrom.detail_de" :toolbar="toolbar" contentType="html" />
            </a-form-item>
            <!-- 商品详情底部 -->
            <a-form-item>
              <a-button style="margin:0 20px 0 30px;" @click="activeKey = '2'">上一步</a-button>
              <a-button type="primary" @click="activeKey = '5'">下一步</a-button>
            </a-form-item>
          </a-tab-pane>

          <!-- 其他设置 -->
          <a-tab-pane key="5" tab="其他设置">
            <a-form-item label="商品简介中文" name="product_info_zh">
              <a-textarea v-model:value="addFrom.product_info_zh" placeholder="请输入商品简介" />
            </a-form-item>
            <a-form-item label="商品简介英文" name="product_info_en">
              <a-textarea v-model:value="addFrom.product_info_en" placeholder="请输入商品简介" />
            </a-form-item>
            <a-form-item label="商品简介德语" name="product_info_de">
              <a-textarea v-model:value="addFrom.product_info_de" placeholder="请输入商品简介" />
            </a-form-item>
            <!-- 其他设置底部 -->
            <a-form-item>
              <a-button style="margin:0 20px 0 30px;" @click="activeKey = '3'">上一步</a-button>
              <a-button type="primary" @click="addList">保存</a-button>
            </a-form-item>
          </a-tab-pane>
        </a-tabs>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import qs from 'qs'
import { LeftOutlined } from '@ant-design/icons-vue'
export default {
  name: 'addShangpin',
  data() {
    return {
      // 富文本编辑器参数
      toolbar: [
        ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
        ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
        [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
        [{ header: 1 }, { header: 2 }],
        [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
        [{ indent: '-1' }, { indent: '+1' }],
        [{ size: ['small', false, 'large', 'huge'] }], // 配置字号
        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
        [{ font: [] }], //显示字体选择
        [{ align: [] }], // 对齐方式-----
        ['clean'], // 清除文本格式-----
        ['link', 'image', 'video']
      ],
      add: {},
      // 当前激活tab面板的key
      activeKey: '1',
      addFrom: {
        // cateName_en: "",
        cate_id: '',
        brand_id: '',
        supplier_id: '', //供应商id
        label_id: [],
        cateName_zh: '',
        cateName_en: '',
        cateName_de: '',
        product_info_zh: '',
        product_info_en: '',
        product_info_de: '',
        detail_zh: '',
        detail_en: '',
        detail_de: '',
        unit_name: '',
        status: 1,
        warning_stock: '', // 库存预警
        spec_type: 0,
        pic: '',
        image_fnsku: '', //单规格条形图
        price: 0,
        ot_price: 0,
        cost: 0,
        stock: 0,
        bar_code: '',
        weight: 0,
        country: '',
        volume: 0,
        type_id: '', //选择规格数据
        sku_code: '',
        asin_code: '',
        fnsku_code: '',
        logistics: 0, // 是否包邮 0 否 1 是
        youfei: 0,
        is_postage: 0, //邮费
        low_warning: ''
      },
      addFromRules: {
        cate_id: [
          {
            required: true,
            message: '请选择商品分类',
            trigger: 'change'
          }
        ],
        brand_id: [
          {
            required: true,
            message: '请选择商品品牌',
            trigger: 'change'
          }
        ],
        cateName_zh: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        cateName_en: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        cateName_de: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        unit_name: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        warning_stock: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        price: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        ot_price: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        cost: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        stock: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        bar_code: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        weight: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        volume: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        product_info_zh: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        product_info_en: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        product_info_de: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        low_warning: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ]
      },
      // 单规格图1
      imgUrl1: null,
      // 图2
      imgUrl2: null,
      // 选择器数据
      options: [],
      // 商品类型select数据
      optionsBrand: [],
      optionsBrandGj: [
        { label: 'zh', value: 'zh' },
        { label: 'en', value: 'en' },
        { label: 'de', value: 'de' }
      ],
      optionsGys: [], // 供应商
      // 标签的数据
      optionsLabel: [],
      // 选择规格属性
      optionsType: [],
      // 切换中文英文德文
      zh_qh: true,
      en_qh: false,
      de_qh: false,
      // 控制单双规格的显示
      dan: true,
      shaung: false,
      // 调SKU数据的数据
      SkuInf0: {},
      // 点击确定需要生死的数据原型
      queDingOptions: [],
      // 渲染tag
      tagsList: [],
      // tags显示
      tagsShow: false,
      // 生成的Sku数据
      dataSku: [],
      columnsSku: [
        {
          title: '图片',
          dataIndex: 'pic',
          slots: {
            customRender: 'pic'
          }
        },
        {
          title: '售价',
          dataIndex: 'price',
          slots: {
            customRender: 'price'
          }
        },
        {
          title: '成本价',
          dataIndex: 'cost',
          slots: {
            customRender: 'cost'
          }
        },
        {
          title: '商品编号',
          dataIndex: 'bar_code',
          slots: {
            customRender: 'bar_code'
          }
        },
        {
          title: '重量（KG）',
          dataIndex: 'weight',
          slots: {
            customRender: 'weight'
          }
        },
        {
          title: '体积(m³)',
          dataIndex: 'volume',
          slots: {
            customRender: 'volume'
          }
        },
        {
          title: '库存预警',
          dataIndex: 'warning_stock',
          slots: {
            customRender: 'warning_stock'
          }
        },
        {
          title: '低预警数量',
          dataIndex: 'low_warning',
          slots: {
            customRender: 'low_warning'
          }
        },
        {
          title: '标签',
          dataIndex: 'label_id',
          width: 120,
          slots: {
            customRender: 'label_id'
          }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 90,
          slots: {
            customRender: 'operation'
          }
        }
      ],
      // 批量设置的表格数据
      PlDataSku: [
        {
          pic: '',
          image_fnsku: '',
          price: 0, // 价格
          cost: 0, // 成本价
          bar_code: '', // 商品编码
          weight: 0, // 重量
          volume: 0,
          warning_stock: 0,
          low_warning: 0,
          label_id: []
        }
      ],
      PlColumnsSku: [
        {
          title: '图片',
          dataIndex: 'pic',
          slots: {
            customRender: 'pic'
          }
        },
        {
          title: '售价',
          dataIndex: 'price',
          slots: {
            customRender: 'price'
          }
        },
        {
          title: '成本价',
          dataIndex: 'cost',
          slots: {
            customRender: 'cost'
          }
        },
        {
          title: '商品编码',
          dataIndex: 'bar_code',
          slots: {
            customRender: 'bar_code'
          }
        },
        {
          title: '重量',
          dataIndex: 'weight',
          slots: {
            customRender: 'weight'
          }
        },
        {
          title: '体积',
          dataIndex: 'volume',
          slots: {
            customRender: 'volume'
          }
        },
        {
          title: '库存预警',
          dataIndex: 'warning_stock',
          slots: {
            customRender: 'warning_stock'
          }
        },
        {
          title: '低预警数量',
          dataIndex: 'low_warning',
          slots: {
            customRender: 'low_warning'
          }
        },
        {
          title: '标签',
          dataIndex: 'label_id',
          width: 120,
          slots: {
            customRender: 'label_id'
          }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 160,
          slots: {
            customRender: 'operation'
          }
        }
      ],
      // sku多规格的显示
      SkuSS: false,
      // 详情国家切换
      detailChange: [
        { label: '中文', value: 1 },
        { label: '英文', value: 2 },
        { label: '德语', value: 3 }
      ],
      // 当前详情国家
      detailItem: 1
    }
  },

  created() {
    this.getLanmuLists()
    this.getTypeLists()
    this.getLabelList()
    this.getGysLists()
    this.getKucunTypeLists()
  },
  components: {
    QuillEditor,
    LeftOutlined
  },
  watch: {
    activeKey(a1, a2) {
      console.log(a1, a2)
      if (a2 == 1) {
        this.jichuNext()
      } else if (a2 == 2) {
        this.kecunNext()
      } else if (a2 == 3) {
        this.xiangqNext()
      }
    },
    detailItem(index) {
      if (index == 1) {
        this.zh_qh = true
        this.en_qh = false
        this.de_qh = false
        console.log(1)
      } else if (index == 2) {
        this.zh_qh = false
        this.en_qh = true
        this.de_qh = false
        console.log(2)
      } else {
        this.zh_qh = false
        this.en_qh = false
        this.de_qh = true
        console.log(3)
      }
    }
  },
  methods: {
    // 返回
    back() {
      this.$router.push('/depot/list')
    },
    // 商品详情切换
    qiehuan(index) {
      console.log(this.addFrom)
      if (index == 1) {
        this.zh_qh = true
        this.en_qh = false
        this.de_qh = false
        console.log(1)
      } else if (index == 2) {
        this.zh_qh = false
        this.en_qh = true
        this.de_qh = false
        console.log(2)
      } else {
        this.zh_qh = false
        this.en_qh = false
        this.de_qh = true
        console.log(3)
      }
    },
    // tabs切换
    tabsChange(activeIndex) {
      console.log(activeIndex)
      console.log(this.activeKey)
    },
    ress() {
      console.log(this.addFrom.cate_id)
    },
    // 富文本编辑器
    onEditorReady() {
      console.log(this.addFrom.detail_zh)
    },
    // 获取商品栏目列表的数据
    async getLanmuLists() {
      const res = await this.$http.get('/depot/column?lang=zh')
      console.log(res.data.data.list)
      let arr = res.data.data.list
      let newArr = []
      arr.forEach(element => {
        let folg = 'children' in element

        if (!folg) {
          newArr.push({
            label: '|----' + element.column_name,
            value: element.id,
            disabled: false
          })
        } else {
          element.children.forEach(aitem => {
            if ('children' in aitem) {
              newArr.push({
                label: '|----' + element.column_name,
                value: element.id,
                disabled: true
              })
              newArr.push({
                label: '|----|----' + aitem.column_name,
                value: aitem.id,
                disabled: true
              })
              aitem.children.forEach(item2 => {
                newArr.push({
                  label: '|----|----|----' + item2.column_name,
                  value: item2.id,
                  disabled: false
                })
              })
            } else {
              console.log('children' in element.children)
              newArr.push({
                label: '|----' + element.column_name,
                value: element.id,
                disabled: true
              })
              newArr.push({
                label: '|----|----' + aitem.column_name,
                value: aitem.id,
                disabled: false
              })
            }
          })
        }
      })
      this.options = newArr
    },
    // 获取供应商列表
    async getGysLists() {
      const res = await this.$http.get('/depot/supplier')
      let arr = []
      res.data.data.list.forEach(item => {
        arr.push({
          label: item.supplier_name,
          value: item.id
        })
      })
      this.optionsGys = arr
    },
    // 获取商品品牌数据
    async getTypeLists() {
      const res = await this.$http.get('/product/brand?lang=zh')
      let arr = res.data.data.list
      let newArr = []
      arr.forEach(item => {
        newArr.push({ label: item.brand_name, value: item.id })
      })
      console.log(newArr)
      this.optionsBrand = newArr
    },
    // 获取商品标签
    async getLabelList() {
      const res = await this.$http.get('/product/label')
      console.log(res)
      let arr = res.data.data.list
      let newArr = []
      arr.forEach(item => {
        newArr.push({ label: item.label_name, value: item.id })
      })
      this.optionsLabel = newArr
    },
    // 获取商品类型数据
    async getKucunTypeLists() {
      const res = await this.$http.get('/product/type')
      console.log(res)
      let arr = res.data.data.list

      let newArr = []
      arr.forEach(item => {
        newArr.push({ label: item.type_name, value: item.id })
      })
      this.optionsType = newArr
      console.log(this.optionsType)
    },
    // 切换单双规格
    switchDS(i) {
      console.log(i)
      if (i == 0) {
        this.dan = true
      } else {
        this.dan = false
      }
    },
    // 上传图片
    async onFileUpload(file) {
      // this.loading[type] = true;
      console.log(file)
      const formData = new FormData()
      formData.append('category_id', this.updateID)
      formData.append('file', file.file)
      formData.append('country', this.selectGuojia)
      const res = await this.$http.post('/common/upload', formData)
      console.log(res.data.data)
      this.imgUrl1 = process.env.VUE_APP_API_BASE_URL + '/uploads/' + res.data.data
      this.addFrom.pic = res.data.data
    },
    // 单规格上传条形图片
    async onFileUpload2(file) {
      // this.loading[type] = true;
      console.log(file)
      const formData = new FormData()
      formData.append('category_id', this.updateID)
      formData.append('file', file.file)
      formData.append('country', this.selectGuojia)
      const res = await this.$http.post('/common/upload', formData)
      console.log(res.data.data)
      this.imgUrl2 = process.env.VUE_APP_API_BASE_URL + '/uploads/' + res.data.data
      this.addFrom.image_fnsku = res.data.data
    },
    // 批量上传图片1
    async onFileUploadP1(file) {
      console.log(file)
      const formData = new FormData()
      formData.append('file', file.file)
      const res = await this.$http.post('/common/upload', formData)
      this.PlDataSku[0].pic = process.env.VUE_APP_API_BASE_URL + '/uploads/' + res.data.data
      // this.dataSku.forEach(item => {
      //   item.pic = process.env.VUE_APP_API_BASE_URL + '/uploads/' + res.data.data
      // })
    },
    
    // 添加模板的回调
    addMuban() {
      this.$router.push('/goods/attr')
    },
    // 多接口下拉切换回调
    async getTypeItem(id) {
      const res = await this.$http.get('/product/type/rule/' + id)
      console.log(res.data.data)
      this.queDingOptions = res.data.data
    },
    // items数据修改
    delte1(i) {
      console.log(i)

      this.tagsList.splice(i, 1)
      console.log(this.tagsList)
    },
    // items数据小修改
    log(i, j) {
      console.log(i, j)
      this.tagsList[i].rule_attr.splice(j, 1)
      console.log(this.tagsList[i])
    },
    // 点击确定的回调
    async querenSc() {
      this.tagsList = this.queDingOptions
      this.tagsShow = true
    },
    // 获取sku数据
    async shengcheng() {
      if (this.tagsList.length == 0) return this.$message.info('无数据生成')
      this.columnsSku = [
        {
          title: '图片',
          dataIndex: 'pic',
          slots: {
            customRender: 'pic'
          }
        },
        {
          title: '售价',
          dataIndex: 'price',
          slots: {
            customRender: 'price'
          }
        },
        {
          title: '成本价',
          dataIndex: 'cost',
          slots: {
            customRender: 'cost'
          }
        },
        {
          title: '商品编号',
          dataIndex: 'bar_code',
          slots: {
            customRender: 'bar_code'
          }
        },
        {
          title: '重量（KG）',
          dataIndex: 'weight',
          slots: {
            customRender: 'weight'
          }
        },
        {
          title: '体积(m³)',
          dataIndex: 'volume',
          slots: {
            customRender: 'volume'
          }
        },
        {
          title: '库存预警',
          dataIndex: 'warning_stock',
          slots: {
            customRender: 'warning_stock'
          }
        },
        {
          title: '低预警数量',
          dataIndex: 'low_warning',
          slots: {
            customRender: 'low_warning'
          }
        },
        {
          title: '标签',
          dataIndex: 'label_id',
          width: 120,
          slots: {
            customRender: 'label_id'
          }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 90,
          slots: {
            customRender: 'operation'
          }
        }
      ]
      let arr = this.tagsList
      let obj = {
        items: []
      }
      arr.forEach(item => {
        let attrArr = []
        item.rule_attr.forEach(ele => {
          attrArr.push(ele.attr_names)
        })
        obj.items.push({ value: item.rule_names, detail: attrArr })
      })
      console.log(obj)
      this.SkuInf0 = obj
      const res = await this.$http.post('/depot/generate_attr', qs.stringify(this.SkuInf0))
      console.log(res.data.data)
      res.data.data.forEach(item => {
        // 初始化label_id数据
        item.label_id = []
        // item.a1 = item.value1.zh
        for (let i = 1; i < 10; i++) {
          if ('value' + i in item) {
            item['a' + i] = item['value' + i].zh
          } else {
            break
          }
        }
      })
      this.dataSku = res.data.data
      this.tagsList.forEach((item, index) => {
        // console.log(flog)
        this.columnsSku.splice(index, 0, {
          title: item.rule_name,
          width: 160,
          dataIndex: 'a' + (index + 1),
          slots: {
            customRender: 'a' + (index + 1)
          }
        })
      })

      this.SkuSS = true
      console.log(this.dataSku)
      console.log(this.tagsList)
    },
    // 多规格上传图片
    async onFileUpload3(file, index) {
      // this.loading[type] = true;
      console.log(index)
      console.log(file)
      const formData = new FormData()
      formData.append('category_id', this.updateID)
      formData.append('file', file.file)
      formData.append('country', this.selectGuojia)
      const res = await this.$http.post('/common/upload', formData)
      console.log(res.data.data)
      this.dataSku[index].pic = process.env.VUE_APP_API_BASE_URL + '/uploads/' + res.data.data
    },
    // 多规格上传图片2
    async onFileUpload4(file, index) {
      // this.loading[type] = true;
      console.log(index)
      console.log(file)
      const formData = new FormData()
      formData.append('category_id', this.updateID)
      formData.append('file', file.file)
      formData.append('country', this.selectGuojia)
      const res = await this.$http.post('/common/upload', formData)
      console.log(res.data.data)
      this.dataSku[index].image_fnsku = process.env.VUE_APP_API_BASE_URL + '/uploads/' + res.data.data
    },
    tttt() {
      console.log(this.dataSku)
    },
    // 表格数据操作删除
    delRowIndex(i) {
      this.dataSku.splice(i, 1)
      console.log(this.dataSku)
    },
    // 清除批量添加数据
    Preset() {
      this.PlDataSku = [
        {
          pic: '',
          image_fnsku: '',
          price: 0, // 价格
          cost: 0, // 成本价
          bar_code: '', // 商品编码
          weight: 0, // 重量
          volume: 0,
          warning_stock: 0,
          low_warning: 0,
          label_id: []
        }
      ]
    },
    // 批量添加
    PdelRowIndex() {
      console.log(this.dataSku)
      let obj = this.PlDataSku[0]
      this.dataSku.forEach(item => {
        item.pic = obj.pic
        item.price = obj.price
        item.cost = obj.cost
        item.bar_code = obj.bar_code
        item.weight = obj.weight
        item.volume = obj.volume
        item.warning_stock = obj.warning_stock
        item.low_warning = obj.low_warning
        item.label_id = obj.label_id
      })
    },
    // 基础信息下一步
    jichuNext() {
      this.add.cate_id = this.addFrom.cate_id
      this.add.brand_id = this.addFrom.brand_id
      this.add.supplier_id = this.addFrom.supplier_id
      // this.add.label_id = this.addFrom.label_id.join(',')
      // this.add.country = this.addFrom.country
      this.add.product_name = {
        zh: this.addFrom.cateName_zh,
        en: this.addFrom.cateName_en,
        de: this.addFrom.cateName_de
      }

      // this.add.warning_stock = this.addFrom.warning_stock
      // this.add.low_warning = this.addFrom.low_warning
      this.add.status = this.addFrom.status
    },
    // 规格库存下一步
    kecunNext() {
      if (this.addFrom.spec_type == '0') {
        this.add.attrs = []
        let a_obj = {
          detail: {},
          product_id: '',
          sku: '',
          unique: '',
          pic: this.addFrom.pic,
          price: this.addFrom.price,
          cost: this.addFrom.cost,
          bar_code: this.addFrom.bar_code,
          weight: this.addFrom.weight,
          volume: this.addFrom.volume,
          warning_stock: this.addFrom.warning_stock,
          low_warning: this.addFrom.low_warning,
          label_id: this.addFrom.label_id.join()
        }
        this.add.attrs.push(a_obj)
        this.add.spec_type = 0 //单规格
        this.add.type_id = '' //规格id
        this.add.items = []
      } else {
        let b_arr = []
        this.dataSku.forEach(item => {
          b_arr.push({
            detail: item.detail,
            product_id: item.product_id,
            sku: item.sku,
            unique: item.unique,
            pic: item.pic.slice(32),
            price: item.price,
            cost: item.cost,
            bar_code: item.bar_code,
            weight: item.weight,
            volume: item.volume,
            warning_stock: item.warning_stock,
            low_warning: item.low_warning,
            label_id: item.label_id.join()
          })
        })
        console.log(b_arr)
        this.add.spec_type = 1 //单规格
        this.add.type_id = this.addFrom.type_id
        this.add.attrs = b_arr

        let arr = this.tagsList
        let newArr = []
        arr.forEach(item => {
          let arr1 = []
          item.rule_attr.forEach(ele => {
            arr1.push(ele.attr_names)
          })
          newArr.push({ value: item.rule_names, detail: arr1 })
        })
        this.add.items = newArr
      }
      console.log(this.add)
    },
    // 商品详情的下一步
    xiangqNext() {
      this.add.detail = {
        zh: this.addFrom.detail_zh,
        en: this.addFrom.detail_en,
        de: this.addFrom.detail_de
      }
      console.log(this.add)
    },

    // 确认添加的回调
    addList() {
      this.add.product_info = {
        zh: this.addFrom.product_info_zh,
        en: this.addFrom.product_info_en,
        de: this.addFrom.product_info_de
      }
      this.add.goods_type = 2
      this.$refs.addFormRef
        .validate()
        .then(async () => {
          const res = await this.$http.post('/depot', qs.stringify(this.add))
          console.log(res)
          if (res.data.code != 0) return this.$message.error('添加失败' + res.data.msg)
          this.$message.success('商品添加成功！')
          this.addFrom = {
            // cateName_en: "",
            cate_id: '',
            brand_id: '',
            supplier_id: '', //供应商id
            label_id: [],
            cateName_zh: '',
            cateName_en: '',
            cateName_de: '',
            product_info_zh: '',
            product_info_en: '',
            product_info_de: '',
            detail_zh: '',
            detail_en: '',
            detail_de: '',
            unit_name: '',
            status: 1,
            warning_stock: '', // 库存预警
            spec_type: 0,
            pic: '',
            image_fnsku: '', //单规格条形图
            price: 0,
            ot_price: 0,
            cost: 0,
            stock: 0,
            bar_code: '',
            weight: 0,
            country: '',
            volume: 0,
            type_id: '', //选择规格数据
            sku_code: '',
            asin_code: '',
            fnsku_code: '',
            logistics: 0, // 是否包邮 0 否 1 是
            youfei: 0,
            is_postage: 0, //邮费
            low_warning: ''
          }
          this.$router.push('/depot/list')
        })
        .catch(error => {
          console.log(error)
          this.$message.warning('请填写所有必填项')
        })
    }
  }
}
</script>

<style lang="less" scoped>
.ele-body {
  height: 100%;
  .aa {
    height: 100%;
  }
  .ql-editor {
    height: 360px;
  }
}
.warp_tj {
  font-family: 'Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif';
  span.icon-drag {
    font-size: 26px;
    color: #d8d8d8;
    margin-right: 10px;
  }
  display: flex;
  align-items: center;
  .tianjia_item {
    display: flex;
    flex-direction: column;
    .top {
      display: flex;
      align-items: center;
      span:first-child {
        margin-right: 8px;
        line-height: 20px;
        color: #515a6e;
      }
    }
  }
}

.tital_war {
  width: 100%;
  height: 50px;
  padding-left: 10px;
  background: #fff;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  h1 {
    margin: 0;
    padding: 0;
    margin-left: 10px;
    font-size: 22px;
    font-weight: 500;
  }
}
/deep/ .ql-toolbar.ql-snow + .ql-container.ql-snow {
  height: 450px;
}
/deep/ .ant-tabs-top-content {
  // padding-left: 40px;
  .ant-form-item {
    width: 50%;

    .ant-form-item-label {
      width: 100px !important;
      margin-right: 10px;
    }
    .ant-form-item-control {
      width: 70%;
    }
  }
}
.kucun {
  /deep/ .ant-form-item-control {
    width: 40% !important;
  }
  /deep/ .ant-upload.ant-upload-select-picture-card {
    height: 40px !important;
    width: 40px !important;
  }
}
.detail_fwb {
  width: 100%;
  height: 100%;
}
</style>
